const path = require('path')
const EslintPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = { // commonJS的配置对象

  // 模式
  mode: 'development',
  // mode: 'production',

  // 入口 
  entry: './src/main.js',

  // 出口
  output: {
    // 指定打包文件的根目录
    path: path.resolve(__dirname, 'build'), // 必须是绝对路径
    // 指定打包文件(可以带路径)
    filename: 'js/bundle.js',
    clean: true, // 打包前先清除打包根目录的所有资源
  },

  // 模块加载器
  module: {
    rules: [
      // 处理css文件
      {
        test: /\.css$/,  // 配置css文件的正则
        // 1. 每个loader就是一个处理函数
        // 2. 多个loader, 从下向上依次执行
        use: [
          'style-loader', // js文件 => 页面的style标签
          'css-loader'  // css文件 => js文件
        ]
      },
      // 样式: css文件 ==> js文件 ==> 页面中的style标签中
      // css-loader: 将css文件中的样式代码打包到js打包文件中
      // style-loader: 将js打包文件中的css代码插入到页面的<style>

      // 处理less文件
      {
        test: /\.less$/,  // 配置less文件的正则
        use: [
          'style-loader', // js文件 => 页面的style标签
          'css-loader',  // css文件 => js文件
          'less-loader', // 将less文件 => css文件
        ]
      },

      // ES6 => ES5
      {
        test: /\.js$/, // 处理js文件
        exclude: /(node_modules)/, // 不对node_modules下的js进行处理
        use: { // 使用指定loader
          loader: 'babel-loader',
          options: { 
            // 指定babel的预设包
            // presets: ['@babel/preset-env'],

            presets: [
              [
                '@babel/preset-env',
                {
                  useBuiltIns: 'usage', // 只打包使用的ES6新API的实现代码
                  corejs: { version: 2 } // 指定core-js的版本号为2
                }
              ]
            ],
            // 指定babel的插件
            plugins: []
          }
        }
      },

      // 处理js和css中引入的图片
      // 处理图片
      {
        test: /\.(jpg|png|gif)$/,
        type: "asset",
        // 解析器
        parser: {
          // 指定进行图片base64编码最大文件大小
          dataUrlCondition: {
            maxSize: 5 * 1024, // 5kb
          }
        },
        // 打包生成的文件
        generator: {
          // [name]: 图片原本的名称
          // [hash:8]: 图片内容的md5值, 保留前8位
          // [ext]: 图片的后缀名
          filename: 'images/[name]_[hash:8][ext]',
        },
     },

     // 配置 html 的 loader
     {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader'
        }
      }
    ]
  },

  // 插件
  plugins: [
    // eslint插件
    new EslintPlugin(),
    // 打包html的插件
    new HtmlWebpackPlugin({
      template: './public/index.html',  // 对指定页面进行打包
      inject: 'body' // 将打包生成的js插入到页面的body最下面
    })
  ],

  // 开发服务器
  devServer: {
    // 端口号
    port: 4000,
    // 自动打开浏览器
    open: true
  }
}